@media screen and (orientation: portrait) {
    .grid-container {
        display: grid;
        margin: 3vh 5vw;
        grid-template-columns: auto;
        grid-template-rows: 10vh 9vh 9vh 1fr 15vh;
        grid-gap: 2vh;
        grid-template-areas: 'logo' 'datetime' 'weather' 'slide' 'social';
        height: 94vh;
        
    }
    #logo-and-tcpu {
        width: 90vw;
    }
    #datetime {
        width: 90vw;
    }
    #clock {
        text-align: center;
    }
    #date {
        text-align: center;
    }
    #social-footer {
        flex-direction: column-reverse;
        height: 13vh;
    }
    .social-icon {
        height: 4vh;
        width: 4vh;
        padding: 2px;
    }
    .social-handle {
        font-size: 2vh;
    }
    #slide-container {
        height: 45vh;
        width: 90vw;
    }
    .weather-wrapper {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: auto auto auto;
        justify-content: center;
        grid-template-areas: 'current-weather weather-day1 weather-day2';
        grid-gap: 5vw;
        width: 90vw;
    }
    #weather-current {
        grid-area: current-weather;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-template-areas: 'weather-icon weather-temp' 'weather-condition weather-condition';
    }
    #weather-day1 {
         grid-area: weather-day1;
    	 display: grid;
    	 grid-template-columns: auto auto;
    	 grid-template-rows: auto auto auto;
    	 grid-gap: 0;
    	 grid-template-areas: 'weather-day1-icon weather-day1-high' 'weather-day1-icon weather-day1-low' 'weather-day1-condition weather-day1-condition';    
    }
    #weather-day2 {
        grid-area: weather-day2;
    	 display: grid;
    	 grid-template-columns: auto auto;
    	 grid-template-rows: auto auto auto;
    	 grid-gap: 0;
    	 grid-template-areas: 'weather-day2-icon weather-day2-high' 'weather-day2-icon weather-day2-low' 'weather-day2-condition weather-day2-condition';    
    }
    #weather-spacer {
        display: none;
    }
    #weather-day1-low-temp, #weather-day1-high-temp, #weather-day2-low-temp, #weather-day2-high-temp, #weather-day1-condition, #weather-day2-condition {
        font-size: 2vh;
    }
    #weather-icon-day1 img, #weather-icon-day2 img {
        height: 8vh !important;
        margin: -1vh !important;
    }
    .slide-image {
        display: none;
    }
    .slide-title h1 {
        font-size: 5vh;
        line-height: 100%;
        padding-top: 3vh !important;
    }
    .slide-subtitle p {
        font-size: 2vh;
        line-height: 100%;
    }
    .slide-description p {
        font-size: 2vh;
        line-height: 3vh;
    }
    #interstitial {
        width: 90vw;
        height: 45vh;
        left: 5vw;
        top: 37vh;
        
    }
}