html {
    font-size: 16px;
}
body {
    margin: 0;
    padding: 0;
    background: #000;
    font-family: Helvetica, serif;
    font-size: 1rem;
}
a, a:active, a:visited, a:hover {
    text-decoration: none;
}
header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #f90;
    z-index: 333;
    color: #fff;
    transform: translateZ(0);
    transition-timing-function: ease-in;
    padding: 0 0 1.666rem 0;
}
header.hide {
    transform: translateX(-100%);
    transition: transform;
    transition-duration: 0.666s;
}
header.show {
    transform: translateX(0);
    transition: transform;
    transition-duration: 1s;
}
header h1 {
    text-align: center;
    background: #000;
    font-size: 1.666rem;
    color: #f90;
    height: 4.20rem;
    vertical-align: middle;
    line-height: 4.20rem;
}

header h3 {
    text-align: center;
    font-size: 1.333rem;
    vertical-align: middle;
    line-height: 1.666rem;
}

header h4 {
    text-align: center;
    font-size: 1.333rem;
    padding: 0.111rem 1.111rem;
}
header p {
    text-align: center;
    padding: 0.111rem 3rem;
    margin-top: 0.333rem;
}

.video-url {
    text-align: center;
    border-radius: 0.333rem;
    display: block;
    margin: 0.333rem auto;
    padding: 0.2rem 0.5rem;
    width: 88.8vw;
    font-size: 1.666rem;
    background: #363636;
    color: #cacaca;
    border: none;
    outline-color: #fff;
}

header label {
    display: block;
    margin: auto;
    text-align: center;
    padding: 0.666rem 0;
}

header button {
    text-align: center;
    border-radius: 0.333rem;
    display: block;
    margin: 0.333rem auto;
    padding: 0.5rem 1.5rem;
    width: auto;
    font-size: 1.666rem;
    background: #363636;
    color: #cacaca;
    border: none;    
}

header button:hover {
    background: #3f3f3f;
}

#hamburger {
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    margin: 0.333rem;
    padding: 0.1rem 0.3rem;
    font-size: 3.333rem;
    color: #f90;    
    z-index: 666;
    cursor: pointer;
}

.save-load-container  {
    display: flex;
}

.save-load-container button {
}

main {
    display: grid;
    grid-template-columns: auto auto;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
main iframe {
    width: 100%;
}
main.resizable-on-hover iframe:hover {
    transition: transform 0.666s;
}
main.resizable-on-hover iframe:hover:nth-child(1) {
    transform: scale(1.3) translateX(30%) translateY(50%) translateZ(0);
}
main.resizable-on-hover iframe:hover:nth-child(3) {
    transform: scale(1.3) translateX(30%) translateY(-50%) translateZ(0);
}
main.resizable-on-hover iframe:hover:nth-child(2) {
    transform: scale(1.3) translateX(-30%) translateY(50%) translateZ(0);
}
main.resizable-on-hover iframe:hover:nth-child(4) {
    transform: scale(1.3) translateX(-30%) translateY(-50%) translateZ(0);
}


main.scale-on-hover iframe:hover {
    transition: transform 0.666s;
}
main.scale-on-hover iframe:hover:nth-child(1) {
    transform: scale(1.5) translateX(15%) translateY(15%) translateZ(0);
}
main.scale-on-hover iframe:hover:nth-child(3) {
    transform: scale(1.5) translateX(15%) translateY(-15%) translateZ(0);
}
main.scale-on-hover iframe:hover:nth-child(2) {
    transform: scale(1.5) translateX(-15%) translateY(15%) translateZ(0);
}
main.scale-on-hover iframe:hover:nth-child(4) {
    transform: scale(1.5) translateX(-15%) translateY(-15%) translateZ(0);
}


@media screen and (orientation:portrait) {
    html {
        font-size: 24px;
    }
    main {
        grid-template-columns: auto;
    }
    #hamburger {
        font-size: 3rem;
    }
}