html, body {
    overflow-x: hidden;
    width: 100%;
}


/*Welcome section*/

#hello-box {
   display: flex;
   flex-direction: column;
   padding: 20px;
   text-align: center;
   background-color: var(--black-background);
   border: 5px solid var(--header-and-border);
   border-radius: 30px;
   box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .3);
   width: 320px;
}

#hello-box br{
	display: block;
    content: "";
    margin-top: 20px;
}

#agragated-links {
	grid-template-columns: auto 1fr auto;
	display: grid;
}

#background_data {
	grid-template-columns:  auto 12px auto 12px auto;
	display: grid;
}

#pi-stats{
	max-width:300px;
}


.welcome-section {
    text-align: left;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(3, auto);
    justify-items: center;
    align-items: center;
    background: var(--welcome-background);
    min-height: calc(100vh - 80px);
}

.welcome-section .section-content{
    background-color: var(--black-background);
    border: 5px solid var(--header-and-border);
    border-radius: 30px;
    margin: 1.5rem auto 1.5rem auto;
    padding:1rem;
    box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .3);
}

.welcome-section .section-content p{
    margin-top: 0.75rem;
}

.welcome-section .section-content img{
    width: 125px;
    height: 125px;
}

.welcome-section .section-content img:hover{
    outline: 2px solid var(--header-and-border);
    outline-offset: 2px;
}

.typing-animation {
    overflow: hidden;
    border-right: .15em solid var(--header-and-border);
    white-space: nowrap; 
    margin: 0 auto;
    letter-spacing: .2em;
    animation:
      typing 1s steps(5, end),
      blink-caret .75s step-end infinite;
  }

  @keyframes typing {
    from { width: 0 }
    to { width: 5ch }
  }

  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--header-and-border); }
  }


/*Resume sections*/
.resume-section .section-content{
    background-color: var(--bright-background);
    box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, 1);
    border: 10px solid var(--header-and-border);
    max-width: 1000px;
    margin: 3rem auto 3rem auto;
    padding:1rem;
    line-height: 2;
}
.resume-section .section-content p{
    margin-bottom: 1rem;
}

.raspberry-logo {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url('../images/rpi_logo.webp') no-repeat center center;
    background-size: contain;
    vertical-align: middle;
}

.resume-section {
    background-color: var(--dark-background);
    padding: 2rem;
    text-align: left;
}

/*videos and images*/
.video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    padding-top: 56.25%;
    margin: 2rem auto;
}

.video-container iframe,
.video-container video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.section-content img {
    width:100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}


/*font color and size*/
h1 {
    font-family: var(--font-h1);
    color: var(--header-and-border);
    font-size: 3rem;
    font-weight: bold;
}

h2, h3 {
	grid-column: span 5;
    font-family: var(--font-h2);
    color: var(--header-and-border);
}

p,cite{
    font-family: var(--font-body);
    color: var(--text-gray);
}

a {
    color: var(--text-gray);
    transition: color 0.3s ease;
    text-decoration: underline;
}

a:hover{
    text-decoration: underline;
    outline: 2px solid var(--header-and-border);
    outline-offset: 2px;
}


@media (max-width: 1024px) and (min-width: 700px) {
    .welcome-section {
        grid-template-columns: 1fr 0px 1fr;
    }
}

@media (max-width: 700px) {
    .welcome-section {
        grid-template-columns: 1fr;
        padding-top: 30vh;

        #hello-box { order: 1; }
        #background_data { order: 2; }
        #github { order: 3; }
        #agragated-links { order: 4; }
        #pi-stats { order: 5; }
    }

    .resume-section .section-content{
        border: 2px solid var(--header-and-border);
    }
}

@media (max-width: 397px){
	#hello-box, #pi-stats{
		width: 275px;
	}
}