#desktop_help{
        visibility:hidden;
    }

    .container{
        display: flex;
        overflow: hidden;
        justify-content: center;
        max-width: 100%;
        height: 100%;
        overflow: auto; 
    }

    .box{
        flex: 1 1 0px;
        color: white;
        
        margin-top: 0.5vw;
        margin-bottom: 0.5vw;
        border-radius: 0.1cm;
        background-color: rgba(22, 22, 22, 0.658);
    }

    p{
        text-align: left;
        color: white;
        background-color: transparent;
        width: 100%;

        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 80%;

        line-height: 3em;
    }

    html {
        scroll-behavior: smooth;
    }

    body{
        background-color:rgba(22, 22, 22);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        
    }

    a{
        color: lavender;
	text-decoration: underline;
    }

    .left-hand{
	    position: absolute;
	    left: 0px;
	    width: 50%;
    }

    .right-hand{
	    position: absolute;
	    right: 0px;
	    wigth: 50%;
    }

    #sakamoto{
        max-width: 4vw;
    }

    #col_main{
        max-width: 100%;
    }

    #logo_png{
        flex: 1 1 0px;
        max-width: 100%;
        height: auto;
    }
    
    #container_main{
        padding: 5px;
        justify-content: center;
        margin-bottom: 5vw;
    }

@media(min-width: 700px){
    
    #desktop_help{
        visibility:visible;
    }

    
    .container{
        display: flex;
        overflow: hidden;
        justify-content: center;
        max-width: 80%;
        height: 100%;
        overflow: auto; 
    }

    
    p{
        text-align: left;
        color: white;
        border: transparent;
        background-color: transparent;
        width: 100%;

        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 100%;

        white-space: normal;
        word-wrap: break-word;

        line-height: 3em;
    }

    body{
        background-color:rgb(22, 22, 22);   
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }

    .slideNot{
        visibility: hidden;
    }

    .slideUp {
        animation-name: slideUp;
        animation-duration: 1s;
        visibility: visible;
    }
    
    

    #col_main{
        max-width: 80%;
    }

    #logo_png{
        flex: 1 1 0px;
        max-width: 100%;
        height: auto;
    }

    #container_main{
        justify-content: center;
        margin-top: 20vw;
        margin-bottom: 22vw;
        width: 80%;
    }

    @keyframes slideUp {
        0% {
          opacity: 0;
          transform: translateY(70%);
        } 
        100% {
          opacity: 1;
          transform: translateY(0%);
        }
      }

}