#startScreenTwo{
    display: none;
}
@media screen and (max-device-width: 480px)
    and (orientation: portrait){
        .pageOne img{
            width: 320px;
        }
        .startScreenOne{
            background-color: #808080;
        }
        .pageOne-info{
            background-color: #fff;
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
            -webkit-box-shadow: 2px 1px 27px -10px rgba(0,0,0,0.76); 
            box-shadow: 2px 1px 27px -10px rgba(0,0,0,0.76);
            font-family: 'Lato', sans-serif;
            padding-bottom: 40px;
        }
        .pageOne-info h2{
            padding-top: 20px;
            text-align: center;
        }
        .pageOne-info h2 span{
            color: #aa41aa;
        }
        .pageOne-info p{
            text-align: center;
            padding-top: 15px;
            font-weight: 100;
        }
        .pageOne-info button{
            padding: 13px 14px;
            background-color: #0d0d0d;
            color: #fff;
            border: none;
            text-align: center;
            width: 275px;
            margin-left: 20px;
            margin-right: -20px;
            border-radius: 50px;
            cursor: pointer; 
        }
        .pageTwo img{
            width: 319px;
            height: 293px;
        }
        .pageTwo .earth{
            position: relative;
        top: -175px;
        height: 250px;
        width: 230px;
        margin-left: 38px;
        rotate: 20deg;
        }
        .pageOne-info{
            margin-top: 26px;
            padding-bottom: 40px;
            position: relative;
            bottom: 0;
        }
        .pageTwo-info h2{
            padding-top: 20px;
            text-align: center;
        }
        .pageTwo-info span{
            color: #aa41aa;
        }
        .pageTwo-info p{
            text-align: center;
            padding-top: 15px;
            font-weight: 100;
        }
        .pageTwo-info button{
            padding: 13px 14px;
            background-color: #0d0d0d;
            color: #fff;
            border: none;
            text-align: center;
            width: 275px;
            margin-left: 20px;
            margin-right: -20px;
            border-radius: 50px;
            cursor: pointer; 
        }
        .pageTwo-info{
            font-family: 'Lato', sans-serif;
            margin-top: -200px;
            background-color: #fff;
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
            -webkit-box-shadow: 2px 1px 27px -10px rgba(0,0,0,0.76); 
            box-shadow: 2px 1px 27px -10px rgba(0,0,0,0.76);
            font-family: 'Lato', sans-serif;
            padding-bottom: 40px;
            position: relative;
            bottom: 0;
        }
        #datepanel{
          gap: 30px;
        }
        #datepanel h2{
            font-family: 'Teko', sans-serif;
            letter-spacing: 1.5px;
            padding-left: 10px;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 56px;
            height: 27px;
          }
          
          .switch input { 
            opacity: 0;
            width: 0;
            height: 0;
          }
          
          .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
          }
          
          .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
          }
          
          input:checked + .slider {
            background-color: #2196F3;
          }
          
          input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
          }
          
          input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
          }
          
        .slider.round {
            border-radius: 34px;
          }
          
          .slider.round:before {
            border-radius: 50%;
          }
          #datepanel{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 64px;
          }
          main{
            font-family: 'Ysabeau Infant', sans-serif;
          }
          main h2{
            padding-left: 15px;
          }
          main #inputField input{
            margin-left: 15px;
            padding: 13px 14px;
          }
          main #inputField button{
            margin-top: 8px;
            margin-left: 15px;
            padding: 12px 13px;
            border: none;
            background-color: #6858df;
            color: #fff;
            font-weight: 600;
          }
          #outputField{
            padding-left: 13px;
            animation: slideDown;
            transition: 0.5s  ease;
            display: none;
          }
          #outputField h4{
            font-size: 16px;
          }
          #outputField h4 span{
            color: #2196F3;
          }
          
          @keyframes slideDown {
            from{height: 0;}
            to{height: 100%;}
          }
          #main{
            display: none;
          }
    }