html, body{
  background:black;
}

@font-face {
  font-family: gothic;
  src: url(../font/gothic.TTF);
}


body{
  margin:0;
  padding:0;
  xwidth:100vw;
  xheight:100vh;
  overflow: hidden;
}


h1{font-family:'gothic';
}

p{font-family:'gothic';}

.socials li{
    display:inline-block;
    margin: auto;  padding:5px;
}

.socials{    position:absolute;
     bottom:1.5vh;
     right:04vh;
z-index: 99;}

.item{
  height:100vh;
  display: inline-block;
}
.side{
  width:10vw;
  text-align: center;
  position:relative;
}
#record{
  position: absolute;
  top:5vh;
  left:0;
  width:100vw;
  text-align: center;
  vertical-align: top;
}
#record img{
  max-width: 90vw;
  max-height: 90vh;
  height: auto;
}
#left img{
  position:absolute;
  top: 50%;
  transform: translate(0, -50%);
  width:60px;
  height: auto;
}
#rightimages{
  position:absolute;
  top: 50%;
  transform: translate(0, -50%);
  width:64px;
  right:0;
}
.side a{
  transition: 0.5s ease-out;
}
.side a:hover {
  opacity:0.5;
}
#right img{
  width:30px;
  height:auto;
}
#left{
  xbackground: red;
  float: left;
}
#left img{
  left:0;
}
#right{
  xbackground: green;
  float: right;
}
#right img{
  right:0;
}



input[type=text]{
    padding:10px;
    width:60%;
   
    font-size:15px;
}

input[type=text]:active{
    border:none;
}

input[type=email]{
    padding:10px;
    width:60%;

    font-size:15px;
}

input[type=submit]{
    padding:10px;
    width:50%;
   
    font-size:15px;
    border:none;
    text-transform: uppercase;
    background-color:dimgray;
    color:white;
}


@media (orientation:portrait) {
  #record{
    top: 50%;
    transform: translate(0, -50%);
  }
  #record img{
    max-width: 70vw;
  }
}