@media only screen and (max-device-width:359px)
{
  html,body
    {
        width: 100%;
        height: 100%;
    }
    #landpage
    {
        height: 100%;
        width: 100%;
    }
  .helloworld
  {
    font-size: x-small;
    color: white;
  }
  .name h1
  {
    font-size: 20px;
  }
  nav
  {
    display:none;
  }
  .row
  {
    margin: auto;
  }
  .flip3D{ width:200px; height:400px; margin:10px; float:left;}
  .flip3D > .front
  {
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
    background:black; width:200px; height:400px; border-radius: 7px;
    color:white;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
  }
.flip3D > .back
  {
    position:absolute;
   -webkit-transform: perspective( 600px ) rotateY( 180deg );
    transform: perspective( 600px ) rotateY( 180deg );
    background: #80BFFF; width:200px; height:400px; border-radius: 7px;
   -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
  }
.flip3D:hover > .front
  {
   -webkit-transform: perspective( 600px ) rotateY( -180deg );
   transform: perspective( 600px ) rotateY( -180deg );
  }
.flip3D:hover > .back
  {
   -webkit-transform: perspective( 600px ) rotateY( 0deg );
   transform: perspective( 600px ) rotateY( 0deg );
  }
  .back
  {
    margin: 0 auto;
    text-align: justify;
    text-justify: inter-word;
    padding: 10%;
    font-size: medium;
    font-family: 'Bellefair', serif;
  }
  .btn
  {
    margin: 5px;
  }
  .col-md-6
  {
    content: center;
  }
}
@media only screen and (min-device-width: 360px) and (max-device-width:424px)
{
    html,body
    {
        width: 100%;
        height: 100%;
    }
    #landpage
    {
        height: 100%;
        width: 100%;
    }
    .helloworld
    {
        font-size:x-small;
    }
    .name h1
    {
        font-size: 25px;
    }
    nav
    {
        display: none;
  }
  .row
  {
    margin:  auto;
  }
  .flip3D{ width:250px; height:400px; margin:10px; float:left;}
  .flip3D > .front{
    position:absolute;
   -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
    background:black; width:250px; height:400px; border-radius: 7px;
    color:white;
   -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
  }
.flip3D > .back{
  position:absolute;
  -webkit-transform: perspective( 600px ) rotateY( 180deg );
  transform: perspective( 600px ) rotateY( 180deg );
  background: #80BFFF; width:250px; height:400px; border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
  -webkit-transform: perspective( 600px ) rotateY( -180deg );
  transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
  -webkit-transform: perspective( 600px ) rotateY( 0deg );
  transform: perspective( 600px ) rotateY( 0deg );
}
.back
{
  margin: 0 auto;
  text-align: justify;
  text-justify: inter-word;
  padding: 10%;
  font-size:large;
  font-family: 'Bellefair', serif;
}
.btn
{
  margin: 10px;
}
.col-md-6
{
    content: center;
}
}
@media only screen and (min-device-width: 480px) and (max-device-width:540px)
{
    html,body
    {
        width: 100%;
        height: 100%;
    }
    #landpage
    {
        height: 100%;
        width: 100%;
    }
    .row
  { 
      margin: auto;
  }
  .flip3D{ width:250px; height:400px; margin:10px; float:left;}
  .flip3D > .front{
    position:absolute;
   -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
    background:black; width:250px; height:400px; border-radius: 7px;
    color:white;
   -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
  }
.flip3D > .back{
  position:absolute;
  -webkit-transform: perspective( 600px ) rotateY( 180deg );
  transform: perspective( 600px ) rotateY( 180deg );
  background: #80BFFF; width:250px; height:400px; border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
  -webkit-transform: perspective( 600px ) rotateY( -180deg );
  transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
  -webkit-transform: perspective( 600px ) rotateY( 0deg );
  transform: perspective( 600px ) rotateY( 0deg );
}
.back
{
  margin: 0 auto;
  text-align: justify;
  text-justify: inter-word;
  padding: 10%;
  font-size:large;
  font-family: 'Bellefair', serif;
}
.btn
{
  margin: 10px;
}
.col-md-6
{
    content: center;
}

}