StadiumMaster.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Pages/Site1.Master" AutoEventWireup="true" CodeBehind="StadiumMaster.aspx.cs" Inherits="YoadMadrid.Pages.WebForm5" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style>
        @font-face {
            font-family: 'RealMadrid2019';
            src: url('Fonts/real-madrid-19-20.ttf');
        }

        @font-face {
            font-family: 'BragoFree';
            src: url('Fonts/Bragofree-L3l8E.ttf');
        }

        body {
            background-image: url(/Images/Stadium.png);
            background-repeat: no-repeat;
            background-position: center; 
            background-size: cover;
            font-family: Arial, sans-serif;
            margin: 0;
            overflow: hidden;
            height: 100vh;
        }

        .centered-container {
            display: flex;                /* Use flexbox */
            align-items: center;      /* Center horizontally */
            height: 100vh;                /* Full viewport height */
            width: 100%;                 /* Full viewport width */
            flex-direction: column;
        }

        .blurry-div {
            min-height: 24vh;
            width: 100%;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(4px);
            box-shadow: 20px 0px 25px rgba(0, 0, 0, 0.2);
            color: white;
            font-size: 28px;
            font-family: Bahnschrift;
            text-align: center;    
            padding-top: 15px;/* Center text inside the div */
        }

        #barStadium a {
    background-color: #bfdbfe;
    color: #3b82f6;
}

        h1, p {
            font-family: David;
            color: white;
            margin: 0px 0;               /* Consistent margin for top and bottom */
        }

        h1 {
            font-size: 75px;
            color: #0070c0;
        }

        p.paragraph1, p.paragraph2, p.paragraph3, p.paragraph4 {
            font-size: 33px;
        }

        p.paragraph2 { color: yellow; }
        p.paragraph3 { color: red; }
        p.paragraph4 { color: #00529f; }

    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="centered-container">
        <div class="blurry-div">
            <h1 style="font-family: Bahnschrift; color: white">Stadium</h1>
            The Santiago Bernabéu Stadium, home of Real Madrid Football Club, has undergone significant changes since its opening in 1956. 
            <br />
            With a seating capacity of over 80,000, it's one of the largest stadiums in Europe. 
            <br />
            Major renovations in the 1980s and 2010s have modernized the facility, including the addition of a retractable roof. 
            <br />
            This upgrade has enhanced the matchday experience, creating a more intense and intimate atmosphere that gives the home team an edge. 
            <br />
            The roof also allows for better control over temperature and humidity, providing optimal playing conditions. 
            <br />
            Additionally, the stadium now features advanced sound and lighting systems, further improving the overall fan experience. 
            <br />
            Named after former Real Madrid president Santiago Bernabéu, the stadium has earned the top rating from the Union of European Football Associations.
        </div>
        <div style="flex: 1;"></div>
    </div>
</asp:Content>