*	{
	box-sizing: border-box;
}

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
  margin-top: 40px;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

@media only screen and (min-width: 300px)	{
	
	.content	{
	
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		color: white;
	}	

	.header-picture	{
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		/* width: 300px; */
		height: 200px;
		
	
		background-image: 
		linear-gradient(rgba(100,100,100, 0.5),rgba(0,0,0, 0.9)), url("./img/chasecenter.jpg");

		background-position: 0 38%;
		
		background-repeat: no-repeat;
		
		background-size: cover;
	
		margin: 0 auto;
		
		color: white;
		
	}
		.sticky-top	{
		background-color: white;
	}
	
	.offcanvas-body	{
		align-items: center;
	}
	
	.offcanvas-body .btn	{
		width: 150px;
		margin-top: 5px;
		margin-bottom: 5px;
	}


	.carousel-1	{
		height: 100px;
		
		display: flex;
		justify-content: center;
		flex-direction: column;
		
		
		/* url("./img/London2022.jpg"); */
		
		background-repeat: no-repeat;
		
		background-position: 50;
		
		background-color: #dedeea66;
	}

	.carousel	{
		width: 300px;
		
	}
	
	.carousel-indicators	{
		display: none;
	}

	/* carousel-1 is the container for the text */
	/* We set up different font styles for different info inside the boxes */

	.carousel-1 h1	{
		align-self: center;
		font-size: 20px;
	}

	.carousel-1 h2	{
		align-self: center;
		font-size: 10px;
	}

	.carousel-1 h3	{
		align-self: center;
		font-size: 10px;
	}

	.carousel-1 h4	{
		align-self: center;
		font-size: 10px;
	}

	.header_carousel	{
		display: flex;
		justify-content: center;
		
		/* width: 300px; */
		
		margin: 0 auto;
		
		margin-bottom: 15px;

	}

	.current_score_eu	{
		width: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		color: white;
		
		background-color: green;
		
		background-image: url("./img/buffy.png");
		
		background-size: cover;
		
		background-repeat: no-repeat;
		
		background-position: 50% 50%;
		
	}

	.current_score_eu h1,
	.current_score_wo h1	{
		font-size: 80px;
		font-weight: bold;
	}

	.current_score_wo	{
		width: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		color: white;
		
		background-color: red;
		
		background-image: url("./img/dani.png");
		
		background-size: cover;
		
		background-repeat: no-repeat;
		
		background-position: 50% 50%;
		
	}

	.main-content	{

		display: flex;
		justify-content: center;
		flex-direction: column;
		
		/* width: 300px; */
		margin: 0 auto;
		
	}
	
	.main-content a {
		text-decoration: underline;
		color: inherit;
	}
	
	.main-content a:hover {
		font-weight: bold;
	}

	.main-content-eu,
	.main-content-wo	{
		display: flex;
		flex-direction: column;
		align-items: center;
	}	

	.nav-mobile	{
		
		display: flex;
		margin: 0 auto;
		margin-bottom: 15px;
	}
	
	.offcanvas-body	{
		display: flex;
		flex-direction: column;
	}
	
	.offcanvas-body #btn-wo	{
		background-color: red;
	}
	
	.offcanvas-body #btn-eu	{
		background-color: blue;
	}


	.main-content h1	{
		font-size: 30px;
	}

	.main-content h2	{
		font-size: 25px;
	}

	.main-content h3	{
		font-size: 20px;
		word-break: break-word;
	}

	.main-content h4	{
		font-size: 15px;
	}
	
	.header	{
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}
	
	.content-header	{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		border-bottom: 1px solid black;
		margin-bottom: 10px;
	}
	
	.content-content	{
		margin-bottom: 30px;
		
	}
	
	.main-content-results	table	{
		table-layout: fixed;
	}
	
	.main-content-results th	{
	overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word;
	}

	.main-content-results td	{
	overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word;
	}
	
	.main-content-results	#desktop	{
		display: none;
	}
	
	/* Create three equal columns that floats next to each other */
	.team-column {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;		
	  float: left;
	  padding: 10px;
	  height: 250px; /* Should be removed. Only for demonstration */
		border-radius: 200px;
	}
	
	.team-row img	{
		max-width: 200px;
		height: auto;
	}
	
	/* Clear floats after the columns */
	.team-row:after {
	  content: "";
	  display: table;
	  clear: both;
	}

}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
	.team-column {
	width: 100%;
	}
}

@media only screen and (min-width: 1000px)	{

	.content	{
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		color: white;
	}
	/* Setting Up the navbar width */

	.header-picture	{
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		width: auto;
		height: 400px;
		
	}

	.navbar	{
		display: block;
	}

	.header-picture h1	{
		font-size: 60px;
		text-shadow: -4px 5px black;
		font-weight: bold;
		
	}

	.header-picture h3	{
		font-size: 30px;
		text-shadow: -2px 3px black;
		font-weight: bold;
		
	}

	.container-fluid	{

		
		width: 100%;	

		
		padding-left: 0;
		padding-right: 0;
		
	}

	#navbarSupportedContent	{
		align-self: flex-end;
		background-color: white;
		
	}

	.nav-item	{
		font-size: 30px;
		
	}

	.breaker	{
		background-color: transparent;
		height: 50px;
	}


	/* Carousel Part (Below Navbar) */
	/* We set height, width and flex */
	/* Carousel-1 is the container of the text */
	/* carousel is to adjust width */


	.carousel-1	{
		height: 300px;
		
		display: flex;
		justify-content: center;
		flex-direction: column;
				
		/* url("./img/London2022.jpg"); */
		
		background-repeat: no-repeat;
		
		background-position: 50;
		
		background-color: #dedeea66;
	}

	.carousel	{
		width: 1000px;
		
	}

	/* carousel-1 is the container for the text */
	/* We set up different font styles for different info inside the boxes */

	.carousel-1 h1	{
		align-self: center;
		font-size: inherit;
	}

	.carousel-1 h2	{
		align-self: center;
		font-size: 30px;
		
	}

	.carousel-1 h3	{
		align-self: center;
		font-size: 25px;
		
	}

	.carousel-1 h4	{
		align-self: center;
		font-size: 40px;
		
	}

	.header_carousel	{
		display: flex;
		justify-content: center;

		
		width: 100%;
		
		margin: 0 auto;

	}

	.carousel-indicators	{
		display: flex;
	}

	/* Current_Score box is the box on the left/right side of the slide in the middle */
	/* It should be a box that just includes "Score Team World/Europe: 1" maybe with a picture */

	.current_score_eu	{
		width: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		color: white;
		
		background-color: green;
		
		background-image: url("./img/buffy.png");
		
		background-size: cover;
		
		background-repeat: no-repeat;
		
		background-position: 50% 50%;
		
	}

	.current_score_eu h1,
	.current_score_wo h1	{
		font-size: 80px;
		font-weight: bold;
	}

	.current_score_wo	{
		width: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		color: white;
		
		background-color: red;
		
		background-image: url("./img/dani.png");
		
		background-size: cover;
		
		background-repeat: no-repeat;
		
		background-position: 50% 50%;
		
	}

	/* Main Content Box */
	.main-content	{

		display: flex;
		justify-content: center;
		flex-direction: column;
		
		width: 1600px;
		margin: 0 auto;
		
	}

	#wo	{
		

		background-image: linear-gradient(90deg, red, transparent 30%, transparent 70%, red);
		min-height: 100vh;
		
	}

	#eu	{

		background-image: linear-gradient(90deg, blue, transparent 30%, transparent 70%, blue);
		min-height: 100vh;
	}
	
	#st	{
		
		background-image: 
		linear-gradient(90deg, grey, transparent 30%, transparent 70%, grey),
		linear-gradient(45deg, blue, transparent 5%, transparent 95%, red),
		linear-gradient(135deg, blue, transparent 5%, transparent 95%, red);
		
		min-height: 100vh;
		
	}

	.main-content h1	{
		font-size: 30px;
	}

	.main-content h2	{
		font-size: 25px;
	}

	.main-content h3	{
		font-size: 20px;
		word-break: break-word;
	}

	.main-content h4	{
		font-size: 15px;
	}



	.main-content-header	{
		display: flex;
		justify-content: center;
		width: 1000px;
		margin: 0 auto;
		
		margin-bottom: 40px;
		
	}

	.main-content-content	{
		display: flex;
		flex-direction: column;
		
		width: 1000px;
		
		margin: 0 auto;
		margin-bottom: 40px;
	}

	.team-content-content	{
		display: flex;
		flex-direction: row;
		
		width: 1000px;
		
		margin: 0 auto;
		margin-bottom: 40px;
	}
	
	.team-cotnent-box	{
		display: flex;
	}

	.main-content-results	{
		display: flex;
		flex-direction: column;
		
		width: 1600px;
		
		margin: 0 auto;
		margin-bottom: 40px;
	}

	.content-header	{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		
		margin-bottom: 10px;
		
		border-bottom: 1px solid black;
		
	}

	.team-picture-eur,
	.team-picture-wor{
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		width: 1600px;
		height: 800px;
		


		
		background-repeat: no-repeat;
		
		background-position: 50% 50%;
		
		background-size: 100%;
		
		margin: 0 auto;
		
		color: white;
		
	}

	.team-picture-eur	{
		
		background-image: 
		linear-gradient(rgba(100,100,100, 0.0),rgba(100,100,100, 0.0)),
		url("./img/TeamEurope.png");

	}

	.team-picture-wor	{
		
		background-image: 
		linear-gradient(rgba(100,100,100, 0.0),rgba(100,100,100, 0.0)),
		url("./img/TeamWorld.png");
	}

	.table-result	th,
	.table-result	td	{
		max-width: 50px;
	}
	
	#interview-img	{
		width: 200px;
		height: 200px;
		border: 2px solid black;
		border-radius: 200px;
	}

	.main-content-interview	{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		
		width: 1600px;
		margin: 0 auto;
		margin-top: 30px;
		

	}
	
	.interview-header	{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		
		margin-bottom: 60px;
	}
	
	.interview-content	{
		display: flex;
		flex-direction: column;
		
		width: 1000px;
		margin: 0 auto;
	}
	
	.interview-content #mod	{
		font-weight: bold;
	}

	.interview-content #int	{
		font-style: italic;
	}

	.interview-content-question	{
		margin-bottom: 10px;
	}
	
	.interview-content-answer	{
		margin-bottom: 30px;
	}
	
	.nav-mobile	{
		display: none;
	}

	.main-content-results	#desktop	{
		display: table-cell;
	}
	
	.team-row	{
		display: flex;
		justify-content: center;
		width: 1000px;
		margin: 0 auto;
	}
		
}