@font-face {
  font-family:zilla-slab;
  src:url(ZillaSlab-Medium.ttf);
}
@font-face {
  font-family:zilla-slab-regular;
  src:url(ZillaSlab-Regular.ttf);
}
@font-face {
  font-family:skelementary;
  src:url(SKElementary.ttf);
}
@font-face {
  font-family:necto-mono;
  src:url(Necto-Mono.woff);
}

@font-face {
  font-family:nippo-bold;
  src:url(Nippo-Bold.tff);
}
@font-face {
  font-family:nippo-medium;
  src:url(Nippo-Medium.tff);
}
@font-face {
  font-family:nippo-light;
  src:url(Nippo-Light.tff);
}
@font-face {
  font-family:pixeboy;
  src:url(Pixeboy.tff);
}


.container{
    width:100%;
    border-left:black solid 30px;
    border-right:black solid 30px;
    border-top:black solid 30px;

    height:100vh;
    position:relative;
    display:flex;
    flex-direction: row;
}

.left{
    display:block;
    height:100vh;
    position:fixed;
    left:0px;
        top:0px;

        border-left:black 30px solid;

}

.left-1{
    display:block;  
    height:100vh;
    writing-mode: vertical-rl;
    position:fixed;
    left:56px;
        top:0px;

}

.right{
    display:block;
    height:100vh;
    position:fixed;
    right:0px;
    top:0px;
            border-right:black 30px solid;

}
.right-1{
    display:block;
    height:100vh;
    position:fixed;
    right:56px;
        top:0px;

}

.container-a{
    display:flex;
}
.container-left{
    width:50%;
    border-right:2px dashed black;
}

.container-right{
    width:50%;
}
.header{
    background-color:black;
    padding:10px;
    position:absolute;
    top:-20px;
    text-align:center;
    left:0px;
    width:100%;
}
.header .title{
    font-family:'pixeboy';
    font-size:56px;
    line-height:1.0;
    color:white;
}

.header .Question{
    font-family:'nippo-light';
    font-weight:100;
    font-size:20px;
    line-height:1.0;
    color:white;
}


.left-content{
    width:100%;
    padding-top:200px;
    padding-left:100px;
}

.right-content{
    padding-left:40px;
     padding-top:200px;
    width:100%;
    padding-top:
    
}

.do{
       font-family:'nippo-light';
    font-weight:100;
    font-size:16px;
    line-height:1.6;
    color:white;
    background-color:black;
    padding:10px;
width:80%;
}
.do .green{
    font-family:'nippo-bold';
    color:forestgreen;
}

.do .red{
    font-family:'nippo-bold';
    color:red;
}
.image-container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    width:600px;
}
.image{
    width:160px;
    margin:10px;
    height:200px;
    border:black solid 2px;
}

.image-green-container{
   position:relative;
    height:370px;
    background-color:lawngreen;
    width:70%;
}
.image-green{
    background-image:url(glue.png);
    width:100%;
    height:100%;
    position:absolute;
    right:-30px;
    top:20px;
}

.description-1{
    background-color:white;
    font-family:'necto-mono';
    font-size:12px;
    padding:10px;
    border:solid 2px black;
    position:absolute;
    bottom:-10px;
    left:40px;
}

.image-red-container{
   position:relative;
    height:370px;
    background-color:red;
    width:70%;
}
.image-red{
    background-image:url(dog1.png);
    width:100%;
    height:100%;
    position:absolute;
    right:-30px;
    top:20px;
}

.description{
    background-color:white;
    font-family:'necto-mono';
    font-size:12px;
    padding:10px;
    border:solid 2px black;
    position:absolute;
    bottom:-10px;
    left:40px;
}